<template>
  <div class="drill-table">
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%; border-radius: 6px"
      :span-method="mergeCells"
      :header-cell-style="setHeaderStyle"
      empty-text="暂无数据"
      border
    >
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :width="item.width"
        :align="item.align"
        :prop="item.prop"
      >
        <template #header>
          <div v-if="item.label != '拆分维度'" class="table-header">
            <el-icon
              v-if="item.label === '安装'"
              size="16"
              color="#0077FF"
              @click="handleState(item.label)"
            >
              <CirclePlusFilled v-if="installState" />
              <RemoveFilled v-else />
            </el-icon>
            <el-icon
              v-if="item.label === '提货'"
              size="16"
              color="#0077FF"
              @click="handleState(item.label)"
            >
              <CirclePlusFilled v-if="takeState" />
              <RemoveFilled v-else />
            </el-icon>
            <el-icon
              v-if="item.label === '订单'"
              size="16"
              color="#0077FF"
              @click="handleState(item.label)"
            >
              <CirclePlusFilled v-if="orderState" />
              <RemoveFilled v-else />
            </el-icon>
            <span class="table-header-label">{{ item.label }}</span>
            <el-tooltip effect="dark" placement="bottom">
              <template #content> 展开/折叠自占比 </template>
              <el-icon color="#86909C" size="16"><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
        </template>
        <template v-if="item.children && item.children.length > 0">
          <el-table-column
            v-for="(child, i) in item.children"
            :key="i"
            :label="child.label"
            :width="child.width"
            :align="child.align"
            :prop="child.prop"
          >
            <template v-if="child.children && child.children.length > 0">
              <el-table-column
                v-for="(childChild, childIndex) in child.children"
                :key="childIndex"
                :width="childChild.width"
                :align="childChild.align"
                :prop="childChild.prop"
                :label="childChild.label"
              ></el-table-column>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { drillTableData } from './modules/baseTable'
const {
  loading,
  tableColumns,
  tableData,
  installState,
  takeState,
  orderState,
  setHeaderStyle,
  mergeCells,
  handleState
} = drillTableData()
</script>

<style lang="scss" scoped>
@use './table.scss';
</style>
